﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jq实现选项卡特效-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
	margin:0;
	padding:0;
}
.clearfix {
	zoom:1;
}
.clearfix:after {
	content:".";
	display:block;
	width:0;
	height:0;
	visibility:hidden;
	clear:both;
}
.container {
	margin:20px;
}
ul {
	list-style:none;
	padding-left:20px;
}
ul li {
	float:left;
	padding:5px 10px;
	text-align:center;
	border:1px solid #ccc;
	border-bottom:0;
}
.con {
	display:none;
	width:300px;
	border:1px solid #ccc;
	height:200px;
	text-align:center;
}
ul li.sel {
	background-color:red;
}
.con.sel {
	display:block;
}
</style>
</head>
<body>
<div class="container">
  <ul class="tab clearfix">
    <li class="sel aa"> 选项1 </li>
    <li class="aa"> 选项2 </li>
    <li class="aa"> 选项3 </li>
  </ul>
  <div class="con sel"> 内容1 </div>
  <div class="con"> 内容2 </div>
  <div class="con"> 内容3 </div>
</div>

<script>
$(".container").find($(".aa")).each(function() {
    $(this).bind("mouseover",
    function() {
        var index = $(this).index();
        var $this = $(this);
        $this.addClass("sel");
        $this.siblings().removeClass("sel");
        $this.parent().siblings().removeClass("sel");
        $this.parent().siblings().eq(index).addClass("sel");
    })
})
</script>

</body>
</html>
